<template>
	<div style="position: relative">
		<van-card @click="toShopDishesDetails(item.id)" v-for="(item) in shopArray" :key="item" price="2.00"
			:desc="item.salesVolume" :title="item.shopName" thumb-mode='aspectFill' :thumb="item.headPortrait">
			<template #tags>
				<van-tag plain type="danger">标签</van-tag>
				<van-tag plain type="danger">标签</van-tag>
			</template>
		</van-card>
		<router-view />
		<van-sticky :offset-bottom="50" position="bottom">
			<div class="kuang" v-show="chu">
				<div class="kuang_one">
					<div class="item">红包</div>
					<div class="item">代金券</div>
					<div class="item">津贴</div>
					<div class="item">米粒</div>
					<div class="item">我的收藏</div>
					<div class="item">企业用餐</div>
					<div class="item">发票助手</div>
					<div class="item" style="border-bottom: none">管理地址</div>
				</div>
				<div class="kuang_two"></div>
			</div>
		</van-sticky>
		<van-tabbar route>
			<van-tabbar-item replace to="/waimaiindex" icon="home-o">首页</van-tabbar-item>
			<van-tabbar-item icon="diamond-o" badge="99+">会员</van-tabbar-item>
			<van-tabbar-item replace to="/order" icon="label-o" badge="99+">订单</van-tabbar-item>
			<van-tabbar-item icon="apps-o" @click="xianshi">更多
			</van-tabbar-item>
		</van-tabbar>
	</div>
</template>
<script>
	import {
		ref
	} from 'vue';
	import {
		Toast
	} from 'vant';

	export default {
		name: "DishesList",
		data() {
			return {
				shopArray: [],
				currentPage: 1,
				pageSize: 5,
				total: 0,
				chu: false,
			}
		},
		setup() {
			const showPopover = ref(false);

			// 通过 actions 属性来定义菜单选项
			const actions = [{
					text: '选项一'
				},
				{
					text: '选项二'
				},
				{
					text: '选项三'
				},
			];
			const onSelect = (action) => Toast(action.text);

			return {
				actions,
				onSelect,
				showPopover,
			};
		},
		mounted() { //挂载之后执行的方法
			this.getShopInfoList();
		},
		methods: {
			toShopDishesDetails(id) {
				console.log("id=" + id);
				this.$router.push('/shopDishesList')
			},
			getShopInfoList() {
				this.$axios.get('/shop/likeShop', {
						params: {
							// pageNum: this.currentPage
						}
					})
					.then(res => {
						// console.log("data=" + res)
						this.shopArray = res.result.shop.records;
						console.log("res.data.current=" + res.data.current);
						this.currentPage = res.data.current;
						this.total = res.data.total;
					}).catch(error => {
						console.log("error:" + error)
					})
			},
			xianshi() {

				if (this.chu === false) {
					this.chu = true;
				} else {
					this.chu = false;
				}
			}
		},
	}
</script>
<style>
	.kuang {
		position: fixed;
		width: 100px;
		height: 320px;
		z-index: 99;
		top: 527px;
		left: 315px;
	}

	.kuang_one {
		width: 80px;
		height: 300px;
		border: 1px solid #999999;
		background: #f6f7f8;
		margin: 10px 10px 0 10px;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;
	}

	.kuang_two {
		width: 10px;
		height: 10px;
		border: 1px solid #999999;
		background: #f6f7f8;
		transform: rotate(45deg);
		border-left: none;
		border-top: none;
		z-index: -1;
		margin-left: 45px;
		margin-top: -6px;
	}

	.item {
		width: 80px;
		border-bottom: 1px solid black;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>
